<template>
  <a-list
    itemLayout='horizontal'
    :dataSource='data'
  >
    <a-list-item slot='renderItem' slot-scope='item, index' :key='index'>
      <a-list-item-meta>
        <a slot='title'>{{ item.title }}</a>
        <span slot='description'>
          <span class='security-list-description'>{{ item.description }}</span>
          <span v-if='item.value'> : </span>
          <span class='security-list-value'>{{ encryptEmail(item.value) }}</span>
        </span>
      </a-list-item-meta>
      <template v-if='item.actions'>
        <a slot='actions' @click='item.actions.callback'>{{ item.actions.title }}</a>
      </template>
    
    </a-list-item>
    
    <a-modal
      title='修改绑定邮箱'
      :visible='changPwdVisible'
      :maskClosable='false'
      okText='修改'
      cancelText='取消'
      :confirm-loading='confirmChangPwdLoading'
      @ok='handleOk'
      @cancel='changPwdVisible = false'
    >
      <a-form
        :label-col='{ span: 7 }'
        :form='form'
        :wrapper-col='{ span: 16 }'
        formLayout='horizontal'>
        <a-form-item label='旧邮箱账号'>
          <a-input
            v-decorator="['email',{rules: [{ required: true, message: '旧邮箱账号不能为空' },  {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '邮箱格式不正确'
    }], validateTrigger: 'change'}]"
            placeholder='请输入邮箱账号'>
          </a-input>
        </a-form-item>
        
        <a-form-item label='验证码'>
          <a-input
            style='width: 60%;margin-right: 10px;'
            v-decorator="['captcha',{rules: [{ required: true, message: '验证码不能为空' }]}]"
            placeholder='请输入验证码'>
          </a-input>
          <a-button
            tabindex='-1'
            style='width: 35%;'
            :disabled='state.smsSendBtn'
            @click.stop.prevent='getCaptcha'
            v-text="!state.smsSendBtn && $t('user.register.get-verification-code') || (state.time+' s')"
          ></a-button>
        </a-form-item>
        
        <a-form-item label='新的邮箱账号'>
          <a-input
            :disabled='reInput'
            v-decorator="['newEmail',{rules: [{ required: true, message: '新的邮箱账号不能为空' },  {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '邮箱格式不正确'
    }], validateTrigger: 'change'}]"
            placeholder='请输入新的邮箱账号'>
          </a-input>
        </a-form-item>
      
      </a-form>
    
    
    </a-modal>
  
  
  </a-list>
</template>

<script>
import { getUpdateEmailCaptcha, updateEmail } from '@/api/common'

export default {
  data() {
    return {
      reInput: true,
      changPwdVisible: false,
      confirmChangPwdLoading: false,
      form: this.$form.createForm(this, { name: 'changEmail' }),
      state: {
        time: 60,
        loginBtn: false,
        smsSendBtn: false
      },
      data: [{
        title: '绑定邮箱',
        description: '已绑定邮箱',
        value: this.$store.state.user.info.email,
        actions: {
          title: '修改', callback: () => {
            this.showChangPwdModal()
          }
        }
      }]
    }
  },
  methods: {
    encryptEmail(email) {
      var match = email.match(/(.{4})(.{4})/)
      if (match) {
        // 使用星号替换中间的4位
        return email.replace(/(.{4})(.{2})/, '*'.repeat(8))
      } else {
        return email  // 如果邮箱长度不足8位，则不对其进行加密
      }
    },
    showChangPwdModal() {
      this.changPwdVisible = true
    },
    handleOk(e) {
      this.confirmChangPwdLoading = true
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // 修改邮箱账号
          updateEmail(values).then(() => {
            this.$message.success('修改成功')
            this.changPwdVisible = false
          })
        }
      })
      this.confirmChangPwdLoading = false
    },
    // 获取验证码
    getCaptcha(e) {
      e.preventDefault()
      const { form: { validateFields }, state } = this
      
      validateFields(['email'], { force: true }, (err, values) => {
        if (!err) {
          state.smsSendBtn = true
          
          const interval = window.setInterval(() => {
            if (state.time-- <= 0) {
              state.time = 60
              state.smsSendBtn = false
              window.clearInterval(interval)
            }
          }, 1000)
          
          const hide = this.$message.loading('验证码发送中..', 0)
          // 发送请求获取验证码
          this.reInput = false
          getUpdateEmailCaptcha({ email: values.email }).then(() => {
            setTimeout(hide, 5000)
            this.$notification['success']({
              message: '提示',
              description: '验证码获取成功',
              duration: 8
            })
          }).catch(() => {
            setTimeout(hide, 1)
            clearInterval(interval)
            state.time = 60
            state.smsSendBtn = false
          })
        }
      })
    }
  },
  computed: {}
}
</script>

<style scoped>

</style>
